<template>
  <div style="background: #f8f8f8; padding-bottom: 40px">
    <!-- 一级联动及轮播图区 -->
    <div class="banner">
      <div style="width: 80%; margin: auto">
        <div class="category">
          <div class="con">
            <div
              class="item"
              :class="{ active: currentIndex == index }"
              @mouseenter="toggleEnter(index)"
              @mouseleave="toggleLeave"
              v-for="(category, index) in categoryList"
              :key="category._id"
            >
              <span class="icon">
                <img :src="category.image" alt="" />
              </span>
              <span class="name">{{ category.name }}</span>
              <div class="select" style="display: flex">
                <div>
                  <div class="set-two-item-select-title">
                    <div class="select-title" @click="goProductList(category._id)">{{ category.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="overflow-y: hidden; width: 1048px; margin-left: 152px">
          <el-carousel height="420px">
            <el-carousel-item v-for="item in adList" :key="item._id">
              <img
                :src="item.imgUrl"
                alt=""
                style="width: 1048px; height: 420px"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="content">
      <!-- 助农资讯区 -->
      <div class="message">
        <div class="message-left">
          <el-carousel height="330px">
            <el-carousel-item v-for="item in carouselData" :key="item">
              <img :src="item" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="message-right">
          <el-tabs v-model="activeName">
            <el-tab-pane label="助农资讯" name="first">
              <div class="details" v-for="item in messageData" :key="item._id">
                <div class="link">
                  <a @click="navTo(item._id)">{{ item.title }}</a>
                </div>
                <div class="time">{{ item.time }}</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="助农政策" name="second">
              <div class="details" v-for="item in policyData" :key="item._id">
                <div class="link">
                  <a @click="navTo(item._id)">{{ item.title }}</a>
                </div>
                <div class="time">{{ item.time }}</div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="message-more">
          <a @click="toNews">更多<span class="arrow">>></span></a>
        </div>
      </div>
      <!-- 特色农产品模块 -->
      <div style="margin: 40px auto; width: 1200px">
        <div class="list-tit">
          <div class="text">
            <div class="tit">特色农产品</div>
          </div>
          <a @click="$router.push('/list')" class="view-more">查看更多 ></a>
        </div>
        <!-- 展示区 -->
        <div class="show">
          <div class="item" v-for="item in charProductData" :key="item._id" @click="goDetail(item._id)">
            <div class="goods-img">
              <img :src="item.productImage" alt="" />
            </div>
            <div class="goods-msg">
              <div class="goods-name">{{item.productName}}</div>
              <div class="label">
                <div class="tag" v-for="tag in item.label">{{tag.name}}</div>
              </div>
              <div class="goods-price">
                <div class="price">￥<span class="medium">{{item.price}}</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="home">
import { ref, onMounted, reactive } from "vue";
import { reqCategoryList, reqAdList } from "@/api/category";
import { reqMessageInfo } from "@/api/message";
import { reqPolicyInfo } from "@/api/policy";
import {reqCharProductList} from "@/api/charProduct"
import useUserStore from "@/stores/modules/user";
import { useRouter, useRoute } from "vue-router";
import lun1 from "@/views/home/carousel/images/01fc135bd7fb75a8012099c89a3808.jpg";
import lun2 from "@/views/home/carousel/images/90.jpg";
import lun3 from "@/views/home/carousel/images/07357984-6d4e-458e-842e-cb87526ed066.png";
import lun4 from "@/views/home/carousel/images/414e4da5e9b59fb09edd18c02957a1e2.jpg";
import lun5 from "@/views/home/carousel/images/R-C (2).jpg";

let userStore = useUserStore();
//获取路由器对象
let $router = useRouter();
let $route = useRoute();

let currentIndex = ref(-1);
let activeName = ref("first");
// 一级分类数据
let categoryList = ref<any>([]);
// 广告轮播图数据
let adList = ref<any>([]);
// 政策轮播图数据
let carouselData = ref<any>([lun1, lun2, lun3, lun4, lun5]);
// 首页资讯数据
let messageData = ref<any>([]);
// 首页政策数据
let policyData = ref<any>([]);
// 首页特色农产品数据
let charProductData = ref<any>([])

const toNews = () => {
  $router.push({ path: "/news", query: { current: activeName.value } });
};

// 鼠标移入一级联动的回调
const toggleEnter = (index: any) => {
  currentIndex.value = index;
};
const toggleLeave = () => {
  currentIndex.value = -1;
};
// 获取一级分类数据
const getCategoryList = async () => {
  let result = await reqCategoryList();
  if (result.code == 200) {
    categoryList.value = result.data;
  }
};
// 获取首页广告轮播图数据
const getAdList = async () => {
  let result = await reqAdList();
  if (result.code == 200) {
    adList.value = result.data;
  }
};
// 获取首页资讯数据
const getMessageInfo = async () => {
  let result = await reqMessageInfo();
  if (result.code == 200) {
    messageData.value = result.data;
  }
};
// 获取首页政策数据
const getPolicyInfo = async () => {
  let result = await reqPolicyInfo();
  if (result.code == 200) {
    policyData.value = result.data;
  }
};
// 获取首页特色农产品数据
const getCharProductInfo = async () => {
  let result = await reqCharProductList()
  if(result.code == 200){
    charProductData.value = result.data
  }
}
// 点击跳转到资讯/政策详情页
const navTo = (id: any) => {
  $router.push({
    path: "/newsDetail",
    query: { current: activeName.value, id },
  });
};
// 点击跳转到商品详情页
const goDetail = (_id:any) => {
  $router.push({
    path:`/detail/${_id}`,
    query:{
      charProduct:1
    }
  });
};

// 点击跳转到农产品列表
const goProductList = (_id:any) => {
  $router.push({
    path:'/goodsList',
    query:{cid:_id}
  })
}

onMounted(async () => {
  await userStore.getUserInfo();
  getCategoryList();
  getAdList();
  getMessageInfo();
  getPolicyInfo();
  getCharProductInfo()
});
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 420px;
  position: relative;
  overflow: hidden;
  .category {
    width: 152px;
    height: 420px;
    z-index: 98;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    display: block;
    opacity: 1;
    will-change: transform;
    transform: translateZ(0);
    .con {
      text-align: center;
      padding-bottom: 15px;
      position: relative;
      .item {
        line-height: 24px;
        padding-top: 18px;
        position: relative;
        cursor: pointer;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;

        .icon {
          margin-left: 10px;
          display: inline-block;
          vertical-align: middle;
          width: 16px;
          height: 16px;
          font-size: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .name {
          text-align: left;
          display: inline-block;
          width: 50%;
          height: 24px;
          vertical-align: middle;
          margin-left: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .select {
          position: fixed;
          left: 152px;
          top: -1px;
          z-index: 24;
          min-height: 421px;
          border: 1px solid #eee;
          background: #fff;
          opacity: 0.94;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          width: 1048px;
          visibility: hidden;
          box-sizing: border-box;
          .set-two-item-select-title {
            display: flex !important;
            .select-title {
              display: block;
              text-align: left;
              padding: 20px;
              width: 100px;
              font-size: 14px !important;
              color: #666;
              &:hover {
                color: #4caf50;
              }
            }
          }
        }
        .select::before {
          position: absolute;
          left: -20px;
          top: 0;
          width: 20px;
          height: 100%;
          display: block;
          content: " ";
          background: transparent;
        }
        &:hover {
          .select {
            visibility: visible;
          }
        }
      }
      .item.active {
        .name {
          color: #4caf50;
        }
      }
    }
  }
}

.content {
  width: 100%;
  margin: 0 auto;
  .message {
    width: 80%;
    margin: 20px auto;
    display: flex;
    .message-left {
      width: 45%;
      height: 330px;
      margin-right: 15px;
      margin-top: 10px;
      img {
        width: 100%;
        height: 330px;
      }
    }
    .message-right {
      width: 45%;
      height: 330px;
      margin-left: 15px;
      overflow: hidden;
      .details {
        display: flex;
        height: 48px;
        line-height: 48px;
        .link {
          width: 0;
          flex: 1;
          font-size: 17px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          a {
            color: #3a3c40;
            text-decoration: none;
            cursor: pointer;
          }
        }
        .time {
          width: 150px;
          text-align: right;
          color: #a9a9b8;
          font-style: 15px;
        }
      }
    }
    .message-more {
      position: relative;
      padding-left: 20px;
      font-size: 17px;
      height: 19px;
      line-height: 19px;
      margin-top: 19px;
      a {
        color: #999;
        text-decoration: none;
        span {
          margin-left: 3px;
        }
      }
      a:hover {
        cursor: pointer;
        color: #199e55;
      }
    }
  }
  .list-tit {
    height: 57px;
    line-height: 57px;
    display: flex;
    border-bottom: 2px solid #4caf50;
    margin-top: 40px;
    .text {
      flex: 1;
      .tit {
        width: 176px;
        height: 57px;
        background: #4caf50;
        border-radius: 12px 12px 0 0;
        font-weight: 500;
        font-size: 24px;
        color: #fff;
        text-align: center;
      }
    }
    .view-more {
      position: relative;
      color: #999;
      font-size: 14px;
      height: 19px;
      line-height: 19px;
      margin-top: 19px;
      text-decoration: none;
      &:hover {
        color: #4caf50;
        cursor: pointer;
      }
    }
  }
  .show {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .item {
      position: relative;
      width: 223px;
      height: 298px;
      background: #fff;
      margin-top: 20px;
      margin-right: 20px;
      transition: all 0.2s;
      cursor: pointer;
      &:nth-child(5n) {
        margin-right: 0;
      }
      .goods-img {
        width: 160px;
        height: 160px;
        margin: 18px 32px 15px;
        text-align: center;
        font-size: 0;
        img {
          width: 160px;
          height: 160px;
          vertical-align: middle;
        }
      }
      .goods-msg {
        padding: 0 23px 10px;
        .goods-name {
          height: 40px;
          line-height: 20px;
          font-size: 14px;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .label {
          margin-top: 4px;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          .tag {
            margin-left: 6px;
            height: 18px;
            padding-left: 4px;
            padding-right: 4px;
            font-family: PingFangSC-Regular;
            font-size: 11px;
            display: flex;
            flex: none;
            align-items: center;
            background: #eff4fb;
            border: 1px solid #8a9fcc;
            color: #4869af;
            border-radius: 4px;
            &:first-child{
              margin-left: 0;
            }
          }
        }
        .goods-price {
          display: flex;
          margin-top: 10px;
          overflow: hidden;
          .price {
            font-family: arial;
            font-size: 12px;
            color: #e1251b;
            display: flex;
            align-items: baseline;
            .medium {
              font-size: 22px;
            }
          }
        }
      }
    }
    .item:hover {
      box-shadow: 0 0 16px 0 hsla(0, 0%, 60%, 0.2);
    }
  }
}
</style>

<style lang="scss">
.el-tabs__active-bar {
  background-color: #4caf50;
}
.el-tabs__item.is-active {
  color: #4caf50;
}
.el-tabs__item {
  &:hover {
    color: #4caf50;
  }
}
</style>
